<template>
<div class="graphical-display">
    <title-bar title="图形化展示"></title-bar>
    <probability-prediction></probability-prediction>
    <div class="chart-box">
        <div class="tab">
            <el-radio-group v-model="type" @change="changeType(500)">
                <el-radio v-for="(item, i) in typeList" :key="i" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
        </div>
        <div class="chart-con">
            <ve-line :colors="colors" :mark-point="markPoint" :mark-line="markLine" :settings="chartSettings" :extend="extend" :data-empty="chartData[type].rows.length===0" :width="typeList[type].width" v-loading="loading" height="400px" :legend-visible="true" :data="chartData[type]"></ve-line>
        </div>
    </div>
</div>
</template>

<script>
import TitleBar from '@/components/TitleBar'
import ProbabilityPrediction from './ProbabilityPrediction'
import {
    mapGetters
} from 'vuex'
export default {
    name: 'GraphicalDisplay',
    components: {
        TitleBar,
        ProbabilityPrediction
    },
    computed: {
        ...mapGetters({
            modelDetail: 'common/getModelDetail'
        })
    },
    data () {
        return {
            colors: null,
            markLine: {},
            markPoint: {},
            type: 0,
            chartSettings: {
                digit: 4,
                xAxisType: 'value'
            },
            extend: {
                grid: {
                    left: '50px',
                    right: '50px'
                },
                series: {
                    showSymbol: false
                }
            },
            loading: false,
            chartData: [
                {
                    columns: [],
                    rows: []
                },
                {
                    columns: [],
                    rows: []
                },
                {
                    columns: [],
                    rows: []
                },
                {
                    columns: [],
                    rows: []
                },
                {
                    columns: [],
                    rows: []
                }
            ],
            typeList: [
                {
                    name: 'K-S图',
                    value: 0,
                    yName: ['TPR/FPR'],
                    xName: ['Depth'],
                    width: '500px'
                },
                {
                    name: 'Lift图',
                    value: 1,
                    yName: ['lift'],
                    xName: ['Depth'],
                    width: '100%'
                },
                {
                    name: 'ROC图',
                    value: 2,
                    yName: ['TPR'],
                    xName: ['FPR'],
                    width: '500px'
                },
                {
                    name: 'Gain图',
                    value: 3,
                    yName: ['Precision'],
                    xName: ['Depth'],
                    width: '500px'
                },
                {
                    name: 'P-R图',
                    value: 4,
                    yName: ['Precision'],
                    xName: ['Recall'],
                    width: '500px'
                }
            ]
        }
    },
    created () {
        this.init()
        this.changeType(800)
    },
    methods: {
        changeType (t) {
            this.resetValue()
            this.colors = this.type === 0 ? null : ['#3F9EFF']
            if (this.type === 0) {
                let { point, ks } = this.modelDetail.summary.evaSummary.curvePoint.maxKs
                this.markLine = {
                    symbol: 'circle',
                    data: [ [ { coord: [point[0], point[1]] }, { coord: [point[0], point[2]] } ] ],
                    label: {
                        show: true,
                        formatter: `KS = ${ks}`
                    },
                    itemStyle: {
                        color: '#F56C6C'
                    }
                }
            }
            if (this.type === 2) {
                let { bestThreshold, point } = this.modelDetail.summary.evaSummary.curvePoint.bestThreshold
                this.chartSettings.area = true
                this.markPoint = {
                    symbol: 'circle',
                    symbolSize: 8,
                    data: [ { name: '最佳阈值', value: bestThreshold, xAxis: point[0], yAxis: point[1] } ],
                    label: {
                        show: true,
                        position: 'top',
                        formatter: `最佳阈值 = ${bestThreshold}`
                    },
                    itemStyle: {
                        color: '#F56C6C'
                    }
                }
            }
            if (this.type === 4) {
                let { bestF1, point } = this.modelDetail.summary.evaSummary.bestPR
                this.chartSettings.area = true
                this.markPoint = {
                    symbol: 'circle',
                    symbolSize: 8,
                    data: [ { name: 'F1', value: bestF1, xAxis: point[0], yAxis: point[1] } ],
                    label: {
                        show: true,
                        position: 'top',
                        formatter: `F1 = ${bestF1}`
                    },
                    itemStyle: {
                        color: '#F56C6C'
                    }
                }
            }
            this.loading = true
            setTimeout(() => {
                this.loading = false
            }, t)
        },
        resetValue () {
            this.markPoint = {}
            this.markLine = {}
            this.chartSettings.area = false
            this.chartSettings.yAxisName = this.typeList[this.type].yName
            this.chartSettings.xAxisName = this.typeList[this.type].xName
        },
        init () {
            const { metricsOverview: { positiveSample, negativeSample, totalSample }, scoreAndConfusion } = this.modelDetail.summary.evaSummary
            let ksArr = []
            let liftArr = []
            let rocArr = []
            let gainArr = []
            let prArr = []
            for (let i = 0; i < scoreAndConfusion.length; i++) {
                const t = scoreAndConfusion[i][1] + scoreAndConfusion[i][2]
                const w = scoreAndConfusion[i][1] / t
                const x = t / totalSample
                const y = scoreAndConfusion[i][1] / positiveSample
                const z = scoreAndConfusion[i][2] / negativeSample
                const s = w / (positiveSample / totalSample)
                ksArr[i] = {
                    '样本占比': x,
                    'TPR': y,
                    'FPR': z
                }
                liftArr[i] = {
                    'depth': x,
                    'lift': s
                }
                rocArr[i] = {
                    'FPR': z,
                    'TPR': y
                }
                gainArr[i] = {
                    'depth': x,
                    'Precision': w
                }
                prArr[i] = {
                    'Recall': y,
                    'Precision': w
                }
            }
            // 数组头尾添加两个数据
            const addToArr = (arr, str) => {
                if (str === 'roc') {
                    arr.unshift({ 'FPR': 0, 'TPR': 0 })
                    arr.push({ 'FPR': 1, 'TPR': 1 })
                }
                if (str === 'pr') {
                    arr.unshift({ 'Recall': 0, 'Precision': 1 })
                    arr.push({ 'Recall': 1, 'Precision': 0 })
                }
            }
            addToArr(rocArr, 'roc')
            addToArr(prArr, 'pr')
            // 过滤x轴重复的
            const filterArr = (arr, str) => {
                let newArr = []
                let k = 1
                newArr[0] = arr[0]
                let temp = arr[0]
                for (let i = 1; i < arr.length; i++) {
                    if (temp[str] - arr[i][str] !== 0) {
                        newArr[k] = arr[i]
                        temp = arr[i]
                        k = k + 1
                    }
                }
                return newArr
            }
            this.chartData = [
                {
                    columns: ['样本占比', 'TPR', 'FPR'],
                    rows: ksArr
                },
                {
                    columns: ['depth', 'lift'],
                    rows: liftArr
                },
                {
                    columns: ['FPR', 'TPR'],
                    rows: filterArr(rocArr, 'FPR')
                },
                {
                    columns: ['depth', 'Precision'],
                    rows: gainArr
                },
                {
                    columns: ['Recall', 'Precision'],
                    rows: filterArr(prArr, 'Recall')
                }
            ]
        }
    }
}
</script>

<style lang="less">
.graphical-display {
    .tab {
        width: 30%;
        padding-left: 80px;
        padding-bottom: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        .el-radio-group {
            display: flex;
            flex-direction: column;
            .el-radio {
                margin-top: 16px;
                margin-right: 0;
            }
        }
    }
    .chart-con {
        width: 70%;
    }
    .chart-box {
        display: flex;
    }
}

</style>
